import { useState, memo } from 'react'
import AtTabBar from 'taro-ui/lib/components/tab-bar'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'

import './index.scss'

const tabList = [
  { title: '产品', iconType: 'shopping-bag-2' },
  { title: '关于我们', iconType: 'phone' }
]


function CustomTabBar ({ currentPage, contentClassName, children }) {
  const [currentTab, setCurrentTab] = useState(currentPage || 0)

  const handleClick = (index) => {
    const tabPageList = ['index', 'about']
    setCurrentTab(index)
    const page = tabPageList[index]
    Taro.redirectTo({
      url: `/pages/${page}/index`
    })
  }

  return (
    <View className='custom-page'>
      <View className={`custom-page__body ${contentClassName}`}>{children}</View>
      <View className='custom-page__bar'>
        <AtTabBar
          color='#333'
          selectedColor='#ea6bb8'
          tabList={tabList}
          onClick={handleClick}
          current={currentTab}
        />
      </View>
    </View>
  )
}

export default memo(CustomTabBar)
